import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    //通过配置 alias 来定义路径的别名
    alias: {
      // eslint-disable-next-line no-undef
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 统一导入 scss 样式变量，今后在任意的 vue 文件中就无需导入了，直接使用变量值即可
        additionalData: `@use '/src/styles/variables.scss' as *;`
      }
    }
  },
  // 开发服务器配置
  server: {
    port: 80, // 端口
    open: true, // 自动打开浏览器
    // 配置跨域请求代理
    proxy: {
      '/dev-api': {
        // 目前服务器地址(目前开发阶段暂时用本地ip+端口号模拟,实际应该用后端服务器的ip地址+端口号)
        target: 'http://127.0.0.1:18081',
        changeOrigin: true, // 改变请求头的origin源,保证到达后端服务器的值是target值而不是前端请求路径
        // 路径重写:不进行重写，请求到达后端就是:服务器地址+/dev-api+请求的接口地址
        // 如果后端服务器的接口地址没有/dev-api,就会请求不到资源,因此需要替换为空字符串
        rewrite: (path) => path.replace(/^\/dev-api/, '')
      }
    }
  },
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // svg精灵图需要svg图标所在的目录
      iconDirs: [path.resolve(__dirname, 'src/icons')],
      // 每个svg图标在svg精灵图上的唯一标识,[]是注册时图标的名称,用于定位图标位置
      symbolId: 'icon-[name]'
    })
  ]
})
